import { Input, Select, Space, Carousel } from "antd";
import "../../../assets/sass/home_page/free_templates/featured_picks/featured_picks.css";
import { CameraOutlined, SearchOutlined } from "@ant-design/icons";
import type { SearchProps } from "antd/es/input/Search";
import TodayRecommend from "../../../component/FreeTemplates/FeaturedPicks/TodayRecommend";
import Banner from "../../../component/FreeTemplates/FeaturedPicks/Banner";
import Template_one from "../../../component/FreeTemplates/FeaturedPicks/Template_one";
import Footer from "../../../component/FreeTemplates/FeaturedPicks/Footer";

const FeaturedPicks = () => {
  const { Search } = Input;

  const suffix = (
    <CameraOutlined
      style={{
        fontSize: 16,
        color: "#A1A1A1",
      }}
    />
  );

  const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
    console.log(info?.source, value);
  };

  const options = [
    {
      value: "全部",
      label: "全部",
    },
    {
      value: "H5",
      label: "H5",
    },
    {
      value: "海报",
      label: "海报",
    },
    {
      value: "长页",
      label: "长页",
    },
    {
      value: "表单",
      label: "表单",
    },
    {
      value: "互动",
      label: "互动",
    },
    {
      value: "电子画册",
      label: "电子画册",
    },
    {
      value: "视频",
      label: "视频",
    },
    {
      value: "解决方案",
      label: "解决方案",
    },
  ];

  //轮播图
  const swiperImageList = [
    "/src/assets/image/home_page/swiper/swiper_1.jpg",
    "/src/assets/image/home_page/swiper/swiper_2.jpg",
    "/src/assets/image/home_page/swiper/swiper_3.jpg",
    "/src/assets/image/home_page/swiper/swiper_4.jpg",
    "/src/assets/image/home_page/swiper/swiper_5.jpg",
    "/src/assets/image/home_page/swiper/swiper_6.jpg",
  ];

  return (
    <div className="featured_picks_content">
      <div className="content_header">
        <img
          className="bcd_carousel_banner_img"
          src="/src/assets/image/home_page/free_templates/bcd_carousel_banner_img.jpg"
        />
        <div className="content_search_box">
          <div className="content_search">
            <Space.Compact>
              <Select
                defaultValue="全部"
                options={options}
                className="search_select"
              />
              <Search
                className="search_input"
                placeholder="六一儿童节邀请函"
                enterButton={<SearchOutlined />}
                size="large"
                suffix={suffix}
                onSearch={onSearch}
              />
            </Space.Compact>
          </div>
          <div className="content_search_text">
            <div>邀请函</div>
            <div>游戏</div>
            <div>出场视频</div>
            <div>百日宴邀请函</div>
            <div>抽奖</div>
            <div>婚礼邀请函</div>
            <div>招聘</div>
          </div>
        </div>
        <div className="content_calendar"></div>
      </div>
      <div className="content_swiper">
        <Carousel
          // arrows
          autoplay
        >
          {swiperImageList &&
            swiperImageList.map((item, index) => {
              return (
                <div key={index}>
                  <img src={item} style={{ width: "100%", height: "265px" }} />
                </div>
              );
            })}
        </Carousel>
      </div>
      <Banner></Banner>
      <TodayRecommend></TodayRecommend>
      <div className="ad_image_1">
        <img src="/src/assets/image/home_page/ad/ad_1.jpg" />
      </div>
      <Template_one></Template_one>
      <Footer></Footer>
    </div>
  );
};

export default FeaturedPicks;
